// 数据集-新建文件夹
import React, { useState, useEffect, useCallback }  from 'react';
import {
	Form,
	Input, 
	message,
	Modal,
	Card,
	Tree,
} from 'antd';
import { dataSetCreateFolder, dataSetRenameFolder } from 'src/services/DataManage';
import { selectOrgPosWithEmpTree, getResourcePermission, saveResourcePermission } from 'src/services/AnalyseManage';
import { /* getResourceIdByPath, */ mapTreeData } from 'src/libs/utils';

interface Iprops {
	createFolderVisible:boolean
	modalVisible:any
	getModelFiles:any
	isUpdate:any
	folderData:any
}

// eslint-disable-next-line react/display-name
export const CreateFolder = React.forwardRef ( ( props: Iprops, formRef: any ) => {

	const [ treeData, setTreeData ] = useState( [] );
	const [ viewUserList, setViewUserList ] = useState( [] ); 
	const [ editUserList, setEditUserList ] = useState( [] );

	const [ form ] = Form.useForm();

	const handleCancle = () => {
		props.modalVisible( false );
		form.resetFields();
		setViewUserList( [] );
		setEditUserList( [] );
	};
	
	
	const handleOk = () => {
		 form.validateFields().then( value => {
			handleCreate( value );
			handleCancle();
		} ).catch( info => {
			message.warning( '请完善信息' );
		} ); 
	};

	//新增文件夹/更新文件夹
	const handleCreate = async ( data: any ) => {
		let saveInfo = {};
		let result;
		const permissionDto = { editUserList, viewUserList, };
		if( props.isUpdate ) {
			saveInfo = { 
				id: props.folderData.id,
				toTableDesc: data.folderName,
			};
			result = await dataSetRenameFolder( { data: saveInfo } );
			//保存权限
			saveResourcePermission( {
				id: props.folderData.id,
				resourceType: 'date_set_category',
				...permissionDto,
			} );
		}else {
			saveInfo = {
				folderId: '0',
				folderName: data.folderName,
				permissionDto,
			};
			result = await dataSetCreateFolder( { data: saveInfo } );
		}
		if ( result.data && result.data.success ) {
			if( props.isUpdate ) {
				message.success( '更新文件夹成功' );
			}else {
				message.success( '新建文件夹成功' );
			}
			//请求最新的文件数
			props.getModelFiles();
		}
	};

	const getTreeData = useCallback( async() => {
		if ( treeData.length ) return;
		const data = {
			type: 'ORGANIZATION'
		};
		const res = await selectOrgPosWithEmpTree( data );
		if ( res.data.data ) {
			let tree = res.data.data.map( org => mapTreeData( org ) );
			setTreeData( tree );
		}
	}, [ treeData ] );

	const onCheckViewUser = ( checkedKeys, info ) => {
		const data = info.checkedNodes.filter( t => t.type === 'USER' ).map( s => s.id );
		setViewUserList( data );
		form.setFieldsValue( { viewAuth: data } );
		// console.log( data );
	};

	/* const onCheckEditUser = ( checkedKeys, info ) => {
		const data = info.checkedNodes.filter( t => t.type === 'USER' ).map( s => s.id );
		setEditUserList( data );
		form.setFieldsValue( { editAuth: data } );
		// console.log( data );
	}; */

	//查询文件夹权限
	const getPermission = async() => {
		const res = await getResourcePermission( { id: props.folderData.id, resourceType: 'date_set_category' } );
		if ( res.data.success ) {
			const data = res.data.data;
			setEditUserList( data.editUserList || [] );
			setViewUserList( data.viewUserList || [] );
			form.setFieldsValue( { editAuth: data.editUserList || [] } );
			form.setFieldsValue( { viewAuth: data.viewUserList || [] } );
		}
	};

	useEffect( () => {
		if ( !props.createFolderVisible ) return;
		if ( props.isUpdate && props.folderData && props.folderData.id ) {
			getPermission();
		}
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [ props.isUpdate, props.folderData, props.createFolderVisible ] );

	useEffect( () => {
		getTreeData();
	}, [ getTreeData ] );
	

	return (
		<Modal okText={'确定'} 
			visible={props.createFolderVisible}
			cancelText={'取消'} 
			onCancel={handleCancle}
			onOk={handleOk}
			title={!props.isUpdate?'新建文件夹':'更新文件夹'}>
			<Form form={form} ref={ formRef } labelCol={{ span: 4 }}>
				<Form.Item label={'名称'}
					rules={[ { required: true, message: '名称不能为空' } ]}
					name={'folderName'}>
					<Input autoComplete="off" />
				</Form.Item>
				{/* <Form.Item label={'描述'} name={'comments'}>
					<Input/>
				</Form.Item> */}
				<Form.Item label="可见权限" name="viewAuth"
					rules={[ { required: true, message: '不能为空！' } ]}>
					<Card style={{ width: 300 }}>
						<Tree
							checkable
							treeData={treeData}
							checkedKeys={viewUserList}
							onCheck={onCheckViewUser}
						/>
					</Card>
				</Form.Item>
				{/* <Form.Item label="编辑权限" name="editAuth"
					rules={[ { required: true, message: '不能为空！' } ]}>
					<Card style={{ width: 300 }}>
						<Tree
							checkable
							treeData={treeData}
							checkedKeys={editUserList}
							onCheck={onCheckEditUser}
						/>
					</Card>
				</Form.Item> */}
			</Form>
		</Modal>
	);
} );